<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<%@ taglib prefix="memberForm" uri="http://www.tongxingzhe.cn/memberForm" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>添加报名</title>
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/form.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/counterfoil.css">
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/activity/activity/autoApply.do">
                    <input type="hidden" name="id" value="${actId}"/>
                    <input type="hidden" id="memberId" name="memberId" value=""/>
                    <div class="layui-form-item">
                        <label class="layui-form-label">可选票据<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block" style="width: 600px;">
                            <div class="post_main_r">
                                <div id="payitemDiv" class="onlyone">
                                    <div class="post_pay_item">
                                        <div class="post_pay_item_top">
                                            <span class="tit01"></span>
                                            <span class="tit02">票据名称</span>
                                            <span class="tit03">金额</span>
                                            <span class="tit03">剩于</span>
                                        </div>
                                        <div class="cost_container">
                                            <c:set var="chk" value="true"/>
                                            <c:forEach var="counterfoil" varStatus="status" items="${counterfoils}">
                                                <c:set var="csNum"
                                                       value="${counterfoil.limitNum - counterfoil.joinNum}"/>
                                                <div class="cost_item cost-item-new">
                                                    <div class="cost_content">
                                                        <div class="form_input_number">
                                                            <input type="radio" title=" "
                                                                   name="counterfoilId"
                                                                   value="${counterfoil.id}"
                                                                ${csNum==0? 'disabled' : ''} ${csNum!=0 && chk == 'true' ? 'checked="checked"' : ''}>
                                                        </div>
                                                        <div class="form_input_cost form_input_cost_type">
                                                            <input type="text"
                                                                   name="counterfoils[${status.index}].name"
                                                                   class="input cost_name" readonly
                                                                   value="${counterfoil.name}">
                                                        </div>
                                                        <div class="form_input_cost form_input_cost_money">
                                                            <input type="number" min="0.01" readonly
                                                                   name="counterfoils[${status.index}].payment" readonly
                                                                   class="input cost_payment"
                                                                   value="<fmt:formatNumber value="${counterfoil.payment}" pattern="0.00"/>"
                                                            >
                                                        </div>
                                                        <div class="form_input_cost form_input_cost_money">
                                                            <input type="number"
                                                                   name="counterfoils[${status.index}].limitNum"
                                                                   readonly
                                                                   class="input cost_limitNum"
                                                                   value="${csNum}">张
                                                        </div>
                                                    </div>
                                                </div>
                                                <c:if test="${csNum!=0}">
                                                    <c:set var="chk" value="false"/>
                                                </c:if>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">头像</label>
                        <div class="cover-content">
                            <input type="hidden" name="logo" id="pic" lay-verify="logo"
                                   value="http://txzapp-10052192.image.myqcloud.com/1490783498894"/>
                            <span id="cover-img" class="round-img"
                                  style="background-image:url(http://txzapp-10052192.image.myqcloud.com/1490783498894)"></span>
                            <a class="layui-btn layui-btn-danger" id="sel_pic_img">+添加头像</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">联系人<span class="f-verify-red">*</span></label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="realname" name="realname"
                                       placeholder="联系人"
                                       lay-verify="联系人"
                                       value="">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号<span class="f-verify-red">*</span></label>
                            <div class="layui-input-inline">
                                <input class="layui-input typeahead" id="phone" name="mobile"
                                       placeholder="手机号"
                                       lay-verify="mobile"
                                       value="">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="sex" value="1" title="男" checked="checked">
                                <input type="radio" name="sex" value="0" title="女">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">公司名 </label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="company" id="company"
                                       placeholder="公司名"
                                       lay-verify="company"
                                       value="">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">公司职位</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="jobTitle" id="jobTitle"
                                       lay-verify="jobTitle"
                                       placeholder="公司职位" value=''/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">行业</label>
                            <div class="layui-input-inline">
                                <select lay-verify="industryParent" lay-filter="industryParent" id="inParent">
                                    <option value="">选择行业分类</option>
                                    <c:forEach var="industry" items="${industries}">
                                        <option value="${industry.id}">${industry.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="industry" lay-verify="industry" id="industry">
                                    <option value="">选择行业</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline" style="width: 400px">
                                <input class="layui-input" name="extra" id="extra"
                                       lay-verify="extra"
                                       placeholder="备注" value=''/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-inline">
                                <a href="javascript:void(0)" class="layui-btn layui-btn-danger"
                                   lay-submit
                                   lay-filter="myForm">立即提交</a>
                                <a href="${ctx}/activity/activity/activityList.do" class="layui-btn layui-btn-primary">取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctxStatic}/typeahead/typeahead.bundle.js"></script>
<script>
    var form, formcache, thSel = false, thMember = {};
    $(function () {
        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：120x120',
                type: '<%=TargetType.LOGO.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#pic').val(imgs[0].path);
                }
            })
        })

        layui.use(['form'], function () {
            form = layui.form, laydate = layui.laydate;


            // 行业
            form.on('select(industryParent)', function (data) {
                $("#industry").html("");
                var industryId = data.value;
                loadIndustryData(industryId, '');
            });

            //自定义验证规则
            form.verify({
                realname: function (value) {
                    if (!util.checkNumber(value)) {
                        return "请输入联系人";
                    }
                    if (value.length > 30) {
                        return "联系人长度大于30";
                    }
                },
                mobile: function (value) {
                    if (!util.checkNumber(value)) {
                        return "请输入手机号";
                    } else if (value != "" && !util.checkMobile(value)) {
                        return "请填写正确格式的手机号码";
                    } else {
                        var memberId = $("input[name='memberId']").val();
                        if (memberId == "") {
                            $.ajax({
                                url: "${ctx}/system/member/findMemberByPhoneOrName.do",
                                type: 'POST',
                                async: false, // 使用同步的方法
                                data: {
                                    property: 'phone',
                                    value: value
                                },
                                dataType: 'json',
                                success: function (result) {
                                    var data = result.data;
                                    if(data.length>0){
                                        memberId=data[0].id
                                    }
                                }
                            });
                            $("#memberId").val(memberId);
                        }

                    }
                },
                company: function (value) {
                    if (!util.checkNumber && value.length > 50) {
                        return "公司名长度大于50";
                    }
                },
                jobTitle: function (value) {
                    if (!util.checkNumber && value.length > 10) {
                        return "公司职位长度大于10";
                    }
                },
                extra: function (value) {
                    if (!util.checkNumber && value.length > 50) {
                        return "备注长度大于50";
                    }
                }

            });


            form.on('submit(myForm)', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var action = $("#myForm").attr("action");
                    $.post(action, $('#myForm').serialize(), function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("提交成功", function () {
                                location.href = "${ctx}/activity/memberAct/memberActList.do?actId=${actId}";
                            });
                        } else {
                            util.layerMsgError(res.description)
                        }
                    });
                })
                return false;
            });
        });
    })


    function loadIndustryData(inParent, industryId) {
        var array = new Array();
        if (inParent == "") {
            $("#industry").html("");
            array.push("<option value=''>选择行业</option>");
            $("#industry").append(array.join(""));
            form.render('select');
        } else {
            $.post("${ctx}/system/member/getIndustryByParentId.do", {
                "industryId": inParent
            }, function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (industryId == data[i].id) {
                        array.push("<option value = '" + data[i].id + "' selected='selected' >" + data[i].name + "</option>");
                    } else {
                        array.push("<option value = '" + data[i].id + "'>" + data[i].name + "</option>");
                    }
                }
                $("#industry").append(array.join(""));
                form.render('select');
            });
        }
    }

    $('#phone').typeahead({
        hint: false,
        highlight: true,
        minLength: 1
    }, {
        name: 'phone',
        display: 'mobile',
        async: true,
        templates: {
            suggestion: function (member) {
                return '<a href="javascript:void(0);"><span data-id="' + member.id + '" class="t-user-logo" style="background-image: url(' + member.logo
                    + '),url(${ctx}/image/def_user_logo.png)"></span><span class="t-user-name">' + (member.realname || '') + (member.mobile || '') + '</span></a>';
            }
        },
        source: function (q, syn, aja) {
            _findMember('phone', q, aja);
        }
    });

    $('.typeahead').bind('typeahead:select', function (ev, suggestion) {
        thMember = suggestion;
        thSel = true;
        $(ev.currentTarget).blur();
    });
    $('.typeahead').blur(function () {
        if (thSel) {
            _fillInfoById(thMember.id || '');
        } else {
            if (thMember.id) {
                thMember = {};
                clearForm();
            }
        }
        thSel = false;
    });

    function _findMember(type, q, cb) {
        $.ajax({
            url: "${ctx}/system/member/findPartnerMemberByPhoneOrName.do",
            type: "post",
            dataType: "json",
            data: {
                property: type,
                value: q,
                actId: '${actId}'
            },
            success: function (ret) {
                cb(ret.data);
            }
        });
    }


    function _fillInfoById(id) {
        $.ajax({
            url: '${ctx}/system/member/getMember.do',
            type: 'POST',
            dataType: 'JSON',
            data: {
                id: id
            },
            success: function (ret) {
                var member = ret.data.member;
                var inParent = ret.data.inParent;


                var logo = member.logo || '';
                var realname = member.realname || '';
                var phone = member.mobile || '';
                var company = member.company || '';
                var jobTitle = member.jobTitle || '';
                var industryId = member.industry || '';

                $("#cover-img").css('background-image', "url('" + logo + "')");
                $("#realname").val(realname);
                $("#phone").val(phone);

                $("#company").val(company);
                $("#jobTitle").val(jobTitle);
                $("#inParent").val(inParent);
                $("#memberId").val(member.id);
                $("input[name=sex][value=" + member.sex + "]").prop('checked', 'checked');


                loadIndustryData(inParent, industryId);

                $(".u-single-upload").hide();

                form.render('select');
                form.render('radio');
            }
        });
    }

    function clearForm() {
        $("#memberId").val("");
        $('#pic').val("");
        $(".u-single-upload").show();
        $("#cover-img").css('background-image', "url('" + "http://txzapp-10052192.image.myqcloud.com/1490783498894" + "')");

        $("#industry").html("<option value=''>选择行业</option>");
        form.render();
    }
</script>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '报名管理',
            href: '${ctx}/activity/memberAct/memberActList.do?actId=${actId}'
        }, {
            name: "添加报名",
            curr: true
        }],
        btns: [{
            name: '返回',
            icon: 'back',
            href: '${ctx}/activity/memberAct/memberActList.do?actId=${actId}'
        }]
    });
</script>
</body>
</html>